<script setup lang="ts">
import { ElInput, ElSwitch } from 'element-plus';

// import UploaderSingle from '@/components/common/UploaderSingle.vue';
import ProForm from '@/modules/package/form/components/ProForm.vue';
import useForm from '@/hooks/useForm';
import { TStall } from '@/global';
import ApiActivity from '@/api/activity';
import { ProInputNumber } from '@/modules/package/form';

const { source, actId } = defineProps<{
    source?: TStall;
    actId: number;
}>();

const emits = defineEmits<{
    success: [];
}>();

const formItems = [
    {
        label: "展位名称",
        children: {
            field: 'stand_title',
            type: ElInput,
        }
    },
    // {
    //     label: "示例图",
    //     children: {
    //         field: 'cover',
    //         // @ts-expect-error
    //         type: h(UploaderSingle, { class: 'flex-center w-200px h-100px border-1 rounded-md border-#ddd' }),
    //     }
    // },
    {
        label: "押金",
        children: {
            field: 'deposit_amount',
            type: ProInputNumber,
            props: {
                precision: 2,
                min: 0,
            }
        }
    },
    {
        label: "展位介绍",
        children: {
            field: 'stand_desc',
            type: ElInput,
            props: {
                type: "textarea"
            }
        }
    },
    {
        label: "显隐状态",
        children: {
            field: 'is_show',
            type: ElSwitch,
            props: {
                inactiveValue: 1,
                activeValue: 0,
                activeText: '显示',
                inactiveText: '隐藏',
            }
        }
    },
    {
        label: "排序",
        children: {
            field: 'sort',
            type: ProInputNumber,
            props: {
                min: 1,
                precision: 0,
                max: 1000
            }
        }
    },
    {
        label: "备注",
        children: {
            field: 'stand_notes',
            type: ElInput,
            props: {
                type: "textarea"
            }
        }
    },

];

const { refForm, isFetching, model, reset, submit, onFetchResponse } = useForm<TStall>(
    ApiActivity[source ? "standEdit" : "standAdd"],
    {
        defaultModel: Object.assign({
            act_id: actId,
            is_show: 0,          // 默认展示（0是展示）
            sort: 100,
        }, source && { ...source, deposit_amount: source.deposit_amount / 100 }),
        formatModel: (data) => {
            // 转为分
            return { ...data, deposit_amount: data.deposit_amount * 100 };
        }
    });

onFetchResponse(() => emits('success'));

const rules = {
    stand_title: { required: true, message: '请输入展位标题' },
    deposit_amount: { required: true, message: '请输入押金' },
    stand_desc: { required: true, message: '请输入展位介绍' },
    sort: { required: true, message: '输入展位顺序' },
};


</script>

<template>
    <ProForm :col="24"
             ref="refForm"
             :rules="rules"
             :model="model"
             :loading="isFetching"
             :form-items="formItems"
             label-width="6em"
             @reset="reset"
             @submit="submit">
    </ProForm>
</template>